<template>
  <view class="wrapper">
    <view class="header">
      <view class="navber">
        <view class="navber__left" @click="backHandle"
          ><view class="iconfont icon-jiantou-zuo arrow-icon"></view
        ></view>
      </view>
      <view v-if="personInfo.userImageList.length">
        <u-swiper
          :list="personInfo.userImageList"
          @change="(e) => (currentNum_free = e.current)"
          @click="showPreview(personInfo.userImageList[currentNum_free])"
          :autoplay="false"
          keyName="imageUrl"
          indicatorStyle="right: 20px"
          height="750rpx"
        >
          <view slot="indicator" class="indicator-num">
            <text class="indicator-num__text"
              >{{ currentNum_free + 1 }}/{{
                personInfo.userImageList.length || 0
              }}</text
            >
          </view>
        </u-swiper>
      </view>
      <view
        v-else-if="personInfo.gender == 1 && !personInfo.userImageList.length"
      >
        <u-swiper
          :list="boyList"
          @change="(e) => (currentNum = e.current)"
          :autoplay="false"
          keyName="imageUrl"
          indicatorStyle="right: 20px"
          height="750rpx"
        >
          <view slot="indicator" class="indicator-num">
            <text class="indicator-num__text"
              >{{ currentNum + 1 }}/{{ boyList.length }}</text
            >
          </view>
        </u-swiper>
      </view>
      <view
        v-else-if="
          (personInfo.gender == 2 || personInfo.gender == 0) &&
          !personInfo.userImageList.length
        "
      >
        <u-swiper
          :list="girlList"
          @change="(e) => (currentNum = e.current)"
          :autoplay="false"
          keyName="imageUrl"
          indicatorStyle="right: 20px"
          height="750rpx"
        >
          <view slot="indicator" class="indicator-num">
            <text class="indicator-num__text"
              >{{ currentNum + 1 }}/{{ girlList.length }}</text
            >
          </view>
        </u-swiper>
      </view>
    </view>
    <view class="container">
      <view class="header">
        <view class="header__left">
          <view class="userName-view">
            <view class="iconfont icon-wodexiao wodexiao"></view>
            <view class="userName">{{ personInfo.userName }}</view>
          </view>
          <text>{{ time() }}</text>
        </view>
        <view class="bofang-view" @tap="playVoice" v-if="personInfo.voice">
          <view
            class="iconfont icon-bofang bofang"
            style="color: #ffffff"
            v-if="!bofang"
          ></view>
          <image
            src="@/static/image/chart/play-right.png"
            class="play-right"
            v-else
          />
          <view class="iconfont icon-jindutiao progress-icon"></view>
        </view>
      </view>
      <view class="header">
        <view class="header__left">
          <text>{{ $t("friend.StartaChat") }}</text>
          <!-- <text class="tip-line" v-if="!personInfo.chat">{{
            $t("friend.feeChat")
          }}</text>
          <text class="tip-line" v-else style="width: 75%; line-height: 40rpx"
            >{{ $t("friend.payMoney1")
            }}<span class="chatprice"
              >{{ chatUnit.length ? chatUnit[0].symbol : ""
              }}{{ personInfo.price }}</span
            >
            {{ $t("friend.payMoney2") }}
          </text> -->
        </view>
        <view
          class="header__right"
          @click="handleToChat"
          v-if="personInfo.userId != $store.state.userId"
        >
          <image
            src="@/static/image/message.png"
            mode=""
            class="my-icon"
          ></image>
          <text>{{ $t("friend.Message") }}</text>
        </view>
      </view>
      <view class="about">
        <view class="sub-title" style="margin-bottom: 22upx">
          {{ $t("friend.AboutMeandRequire") }}
        </view>
        <view class="about__text">
          {{ userJson.brief }}
        </view>
      </view>
      <view class="info">
        <view class="info-detail">
          <view class="info-view">
            <view
              class="iconfont icon-xingbie bofang"
              style="color: #61bdb2"
            ></view>
            <view class="info-title">{{
              personInfo.gender == 1 ? $t("friend.Male") : $t("friend.Female")
            }}</view>
          </view>
          <view class="info-view" v-if="userJson.height">
            <view
              class="iconfont icon-ruler-fill bofang"
              style="color: #61bdb2"
            ></view>
            <view class="info-title">{{ userJson.height }}cm</view>
          </view>
          <view class="info-view" v-if="userJson.weight">
            <view
              class="iconfont icon-cetizhong bofang"
              style="color: #61bdb2"
            ></view>
            <view class="info-title">{{ userJson.weight }}kg</view>
          </view>
          <view class="info-view">
            <view
              class="iconfont icon-nianling bofang"
              style="color: #61bdb2"
            ></view>
            <view class="info-title">{{ personInfo.userAge }}</view>
          </view>
          <view class="info-view" v-if="personInfo.country || personInfo.region">
            <view
              class="iconfont icon-weizhi bofang"
              style="color: #61bdb2"
            ></view>
            <view class="info-title">{{ `${personInfo.country ? personInfo.country + ',' : ''}${personInfo.region}` }}</view>
          </view>
        </view>
        <view class="sub-title"> {{ $t("dating.Purpose") }}</view>
        <view class="info__link">
          <view
            class="link-text"
            v-for="(label, index) in personInfo.labelList"
            :key="index"
          >
            #{{ getLabelLangType(label) }}
          </view>
        </view>
      </view>

      <view class="photos" v-if="(personInfo.jyUserAlbumPay && personInfo.jyUserAlbumPay.isPay) || (personInfo.userImagePayList && personInfo.userImagePayList.length > 0)">
        <view class="sub-title">
          <view>{{ $t("friend.payPhoto") }}</view>
          <view class="paid" v-if="personInfo.isPay && personInfo.jyUserAlbumPay && personInfo.jyUserAlbumPay.isPay && personInfo.userId != userInfo.userId"
            >{{ $t("friend.Youpaid") }}
            <span class="price"
              >{{ photoUnit.length ? photoUnit[0].symbol : ""
              }}{{ personInfo.jyUserAlbumPay.price }}</span
            >
          </view>
        </view>
        <view
          class="photos__content"
          @click="handlePayPop"
          v-if="!personInfo.isPay"
        >
          <image
            :src="personInfo.jyUserAlbumPay.imageUrl"
            mode=""
            class="photos__content__image"
          ></image>
          <view class="photos__content__above">
            <view class="iconfont icon-suo my-icon"> </view>
            <view class="photos__content__above__text">
              {{ $t("friend.payTOview") }}
            </view>
            <view class="photos__content__above__btn">
              {{ photoUnit.length ? photoUnit[0].symbol : ""
              }}{{ personInfo.jyUserAlbumPay.price }}
            </view>
          </view>
        </view>
        <u-swiper
          :list="personInfo.userImagePayList"
          @change="(e) => (currentNum_pay = e.current)"
          @click="showPreview(personInfo.userImagePayList[currentNum_pay])"
          :autoplay="false"
          indicatorStyle="right: 20px"
          keyName="imageUrl"
          height="490upx"
          v-else
        >
          <view
            slot="indicator"
            class="indicator-num"
            style="margin-bottom: 30rpx"
          >
            <text class="indicator-num__text"
              >{{ currentNum_pay + 1 }}/{{
                personInfo.userImagePayList.length || 0
              }}</text
            >
          </view>
        </u-swiper>
      </view>
    </view>
    <payPop
      :popShow="popShow"
      @close="popShow = false"
      :type="type"
      :enoughMoney="enoughMoney"
      :albumId="albumId"
      :price="price"
      :userPersonalsId="userPersonalsId"
      :unit="unit"
    />
  </view>
</template>

<script>
import payPop from "@/pagesDiscover/friendsInformation/components/payPop.vue";
import { FriendInfoDetail } from "@/services/makeFriend";
import { queryCreateModuleGroup, queryGroupDetail } from "@/services/group";
import { getDefaultColor, getSymbol, getTimeDiff } from "@/utils/index";
import { mapActions, mapState } from "vuex";
export default {
  components: { payPop },
  data() {
    return {
      chatUnit: "",
      photoUnit: "",
      userPersonalsId: "",
      popShow: false,
      currentNum: 0,
      currentNum_free: 0,
      currentNum_pay: 0,
      personInfo: {
        userImageList: []
      },
      type: "",
      userJson: {},
      unit: "",
      albumId: "",
      enoughMoney: false,
      bofang: false,
      audio: "",
      price: "",
      boyList: [require("@/static/image/friend/default_male.png")],
      girlList: [require("@/static/image/friend/default_female.png")],
      language: "",
    };
  },
  computed: {
    ...mapState(["userInfo", "token"]),
  },
  methods: {
    ...mapActions(["changeGroupList"]),
    //预览
    showPreview(obj) {
      console.log(obj)
      if (obj.type === 'image') {
        let url = obj.imageUrl
        uni.previewImage({
          urls: [url],
        });
      } else {
        // const video = uni.createVideoContext(`video-${this.currentNum_free}`, this)
				// video.play()
      }
    },
    time() {
      return getTimeDiff(this.personInfo.lastTime, "minutes", true);
    },
    backHandle() {
      // uni.switchTab({
      // 	url: '/'
      // });
      uni.navigateBack()
    },
    getLabelLangType(obj) {
      if (this.language === "zh-Hans") {
        return obj.label.cn;
      } else if (this.language === "en") {
        return obj.label.en;
      } else if (this.language === "ru") {
        return obj.label.ru;
      }
    },
    // 创建播放音频
    playCreate() {
      this.audio = uni.createInnerAudioContext();
      this.audio.autoplay = false;
      this.audio.src = this.personInfo.voice; //音频地址
    },
    // 销毁音频
    playDestroy() {
      this.bofang = false;
      if (this.audio) {
        this.audio.destroy();
      }
      this.audio = undefined;
    },
    //播放语音
    playVoice () {
      this.bofang = !this.bofang
      if (this.bofang) {
        this.audio.play(); // 执行播放
      } else {
        this.audio.pause();
        this.audio.seek(0)
      }
      this.audio.onEnded(() => {
        this.bofang = false;
      });
    },
    handlePayPop() {
      if(!this.token) {
        uni.navigateTo({
          url: "/pages/login/Login",
        });
        return
      }
      this.enoughMoney = false;
      this.type = 2;
      this.albumId = this.personInfo.jyUserAlbumPay.albumId;
      this.price = this.personInfo.jyUserAlbumPay.price;
      if (
        +this.personInfo.userAccountAlbum.amount >=
        +this.personInfo.jyUserAlbumPay.price
      ) {
        this.enoughMoney = true;
      }
      this.unit = this.photoUnit.length ? this.photoUnit[0].symbol : "";
      this.popShow = !this.popShow;
    },

    async handleCreat() {
      uni.showLoading()
      const { result } = await queryCreateModuleGroup({
        groupName: this.personInfo.userName,
        avatar: this.personInfo.avatar || this.$store.state.normalPic,
        avatarCompress: this.personInfo.avatarCompress || this.$store.state.normalPic,
        memberIds: [this.personInfo.userId],
        moduleType: 1,
      });
      uni.showLoading()
      if (result.code === 200) {
        var group = await this.$RongIMLib.getConversation({
          targetId: result.data,
          conversationType: 3
        })
        const resp = await queryGroupDetail(result.data)
        uni.showLoading()
        if (resp.success) {
          resp.result.data.myName = resp.result.data.jyRemark || 'OMLOOKER'
          // console.log(group, 'group')
          if (group) {
            group.data.info = resp.result.data
            var groupList = this.$store.state.groupList;
            if (!this.$store.state.moduleGroupInfo[1]) {
              this.$store.state.moduleGroupInfo[1] = [
                {
                  groupId: result.data,
                  groupName: this.personInfo.userName,
                  moduleType: 1,
                },
              ];
            } else {
              var index = this.$store.state.moduleGroupInfo[1].find(
                (o) => o.groupId == result.data
              );
              if (index == -1) {
                this.$store.state.moduleGroupInfo[1].push({
                  groupId: result.data,
                  groupName: this.personInfo.userName,
                  moduleType: 1,
                });
              }
            }
            var gIndex = groupList.indexOf((o) => o.groupId == result.data);
            if (gIndex > -1) {
              groupList[gIndex] = group.data.info;
            } else {
              groupList.push(group.data.info);
            }
            await this.changeGroupList(groupList);
            console.log(this.$store.state.groupList)
            uni.hideLoading()
            //直接跳转页面
            uni.navigateTo({
              url:
                "/pages/chat/GroupChat?isFriendGroup=true&backType=1&isModule=true&groupId=" +
                result.data,
              fail(err) {
                console.log(err);
                uni.hideLoading()
              },
            });
          }
        }
        // console.log(groupList);
        // var creat = {
        //   avatar: this.personInfo.avatar || this.$store.state.normalPic,
        //   avatarColorCode: 1,
        //   avatarCompress: this.personInfo.avatarCompress || this.$store.state.normalPic,
        //   groupId: result.data,
        //   groupName: this.personInfo.userName,
        //   groupStatus: 0,
        //   isDelete: 0,
        //   isPublic: 1,
        //   limitNum: 500,
        //   mute: null,
        //   remark: null,
        //   type: 3,
        //   userId: this.$store.state.userId,
        //   defaultName: this.personInfo.userName.slice(0, 1),
        //   showAvatar: this.personInfo.avatar || this.$store.state.normalPic,
        //   avatarColorCode: "1",
        //   defaultColor: getDefaultColor(1),
        //   moduleType: 1,
        // };
        //存储本地交友群组Id{{moduleType 1 交友}}

        
      }
    },
    //支付聊天
    handleToChat() {
      if(!this.token) {
        uni.navigateTo({
          url: "/pages/login/Login",
        });
        return
      }
      this.enoughMoney = false;
      if (!this.personInfo.chatPay && this.personInfo.chat) {
        this.type = 1;
        if (+this.personInfo.userAccount.amount >= +this.personInfo.price) {
          this.enoughMoney = true;
        }
        this.price = this.personInfo.price;
        this.unit = this.chatUnit.length ? this.chatUnit[0].symbol : "";
        this.popShow = !this.popShow;
      } else {
        this.handleCreat();
      }
    },
    async handlePersonInfo() {
      const resp = await FriendInfoDetail(this.userPersonalsId);
      if (!resp.success) return;
      this.personInfo = this.changeAvatarPic(resp.result.data);
      this.personInfo.region = resp.result.data.region ? this.getRegionNameList(JSON.parse(resp.result.data.region)).join(',') : null
      this.personInfo.country = resp.result.data.country ? this.getCountryName(JSON.parse(resp.result.data.country)) : null
      let list = [{
        imageUrl: this.personInfo.avatar,
        imageUrlCompress: this.personInfo.avatarCompress,
        imageUrlIndex: this.personInfo.avatar,
        type: 0
      }]
      if (this.personInfo.userImageList) {
        this.personInfo.userImageList = [ ...list, ...this.personInfo.userImageList ]
        this.personInfo.userImageList.forEach((item, index) => {
          item.poster = item.imageUrlCompress;
          item.type = item.type == 1 ? "video" : "image";
        });
      }
      if (this.personInfo.voice) {
        this.playCreate()
      }
      this.personInfo.labelList = !resp.result.data.labelBoList
        ? []
        : resp.result.data.labelBoList.map((item) => {
            return {
              ...item,
              label: JSON.parse(item.labelName),
            };
          });
      if (this.personInfo.userImagePayList) {
        this.personInfo.userImagePayList.forEach((item, index) => {
          item.poster = item.imageUrlIndex;
          item.type = item.type == 1 ? "video" : "image";
        });
      }

      const userJson = JSON.parse(this.personInfo.userJson);
      if (userJson.weight) {
        this.userJson = userJson;
      }
      // this.chatUnit = await getSymbol(this.personInfo.userAccount.currencyId);
      if (this.personInfo.jyUserAlbumPay.isPay) {
        this.photoUnit = await getSymbol(
          this.personInfo.jyUserAlbumPay.currencyId
        );
      }
    },
  },
  onLoad(option) {
    this.language = uni.getLocale();
    this.userPersonalsId = option.userPersonalsId;
    if (this.userPersonalsId) {
      this.handlePersonInfo();
    }
  },
  onHide() {
    this.playDestroy()
  },
  onUnload() {
    this.playDestroy()
  },
};
</script>

<style scoped lang="scss">
.sub-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 36upx;
  font-weight: 500;
  color: #000000;
  margin-bottom: 30rpx;
  .price {
    font-size: 26upx;
    font-weight: bold;
    color: #fe6600;
    margin-left: 10upx;
  }
  .paid {
    font-size: 26upx;
    font-weight: 400;
    color: #878787;
  }
}
.wrapper {
  height: 100vh;
  background: #ffffff;
}

.header {
  position: relative;

  .navber {
    z-index: 11;
    position: absolute;
    top: var(--status-bar-height);
    height: 44px;
    line-height: 44px;

    .arrow-icon {
      font-size: 36rpx;
      color: #ffffff;
      margin-left: 30rpx;
    }
  }
}

.indicator-num {
  padding: 13rpx 48rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50rpx;
  @include flex;
  justify-content: center;
  margin-bottom: 100rpx;
  &__text {
    color: #ffffff;
    font-size: 26rpx;
  }
}

.container {
  position: relative;
  z-index: 10;
  padding: 50rpx 30rpx;
  border-radius: 40rpx 40rpx 0px 0px;
  background-color: #ffffff;
  margin-top: -100rpx;

  & > view {
    margin-bottom: 60rpx;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // font-family: Source Han Sans CN;
    font-weight: 400;

    &__left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      & > text:first-child {
        font-size: 40rpx !important;
        font-weight: 500 !important;
        color: #000000 !important;
      }

      & > text:last-child {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.4);
      }
    }

    &__right {
      width: 264rpx;
      height: 78rpx;
      box-sizing: border-box;
      background: linear-gradient(90deg, #77cabc 0%, #65c2b2 100%);
      border-radius: 39rpx;
      color: #ffffff;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .my-icon {
        width: 42rpx;
        height: 42rpx;
        // margin: 20rpx 10rpx 0 23rpx;
        margin-right: 10rpx;
      }

      // text {
      //   vertical-align: top;
      //   margin-top: 10px;
      //   display: inline-block;
      // }
    }
  }

  .about {
    &__text {
      font-size: 26upx;
      font-weight: 400;
      color: #878787;
      line-height: 48upx;
    }
  }

  .info {
    .info-detail {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .info-view {
      padding: 17upx 24upx;
      display: flex;
      align-items: center;
      background: #ebf3f2;
      border-radius: 12upx;
      margin-right: 24upx;
      margin-bottom: 24upx;
    }
    .info-title {
      margin-left: 18upx;
      font-size: 26upx;
      font-weight: 500;
      color: #000000;
    }
  }

  .photos {
    margin-bottom: 40rpx;

    &__content {
      position: relative;

      &__image {
        width: 690rpx;
        height: 490rpx;
        border-radius: 10rpx;
      }

      &__image::before {
        content: "";
        position: absolute;
        /* 一定要用绝对定位 */
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
        /* 这里记得给遮罩层加一个圆角！！！ */
        backdrop-filter: blur(30px);
        /* 模糊半径 */
      }

      &__above {
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 690rpx;
        height: 490rpx;
        color: #ffffff;

        .my-icon {
          margin-top: 133rpx;
          font-size: 80rpx;
        }

        &__text {
          margin-top: 21rpx;
        }

        &__btn {
          width: 200rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          background: #61bdb2;
          border-radius: 30px;
          margin-top: 40rpx;
          font-size: 30rpx;
          font-weight: bold;
        }
      }
    }
  }
}
.userName-view {
  display: flex;
  align-items: center;
  margin-bottom: 23upx;
  .wodexiao {
    color: #61bdb2;
    margin-right: 20upx;
  }
  .userName {
    font-size: 36upx;
    font-weight: 500;
    color: #61bdb2;
    width: 300upx;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; // 默认不换行；
  }
}
.bofang-view {
  padding: 15upx 18upx;
  background: #61bdb2;
  border-radius: 39upx;
  display: flex;
  align-items: center;
  .bofang {
    color: #e9f3f2;
    font-size: 48upx;
  }
  .progress-icon {
    z-index: 10;
    font-size: 24rpx;
    margin: 0 20rpx;
    color: #ffffff;
  }
}
.info__link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.link-text {
  display: block;
  margin-bottom: 13rpx;
  color: #61bdb2;
  font-size: 24rpx;
  margin-right: 40upx;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; // 默认不换行
}
.chatprice {
  font-size: 26upx;
  font-weight: 400;
  color: #fe6600;
  margin: 0 10upx;
}
.play-right {
  width: 48upx;
  height: 48upx;
}
</style>
